<template>
	<view class="bigbox flex flex_jc">
		<view style="position: fixed;top: 0;z-index: 9999;" class="w100" v-if="show_ad">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white" v-if="show_ad"></ad>
		</view>
		<view class="box flex" :class="show_ad?'mt580':''">
			<navigator :url="'/pages/tujian_detail/index?id='+item.id" class="li_box flex .flex_jc" v-for="(item,index) in aoteman">
				<view class="li flex .flex_jc" style="background-image: url('https://box.jiezhui.top/storage/zhuangyuan/tujian_list_bg.png')">
					<view class="icon">
						<u-image width="100%" height="100%" :src="item.icon"></u-image>
					</view>
					<view class="detail" style="width: 100%;">
						<view class="v1">{{item.name}}</view>
						<view class="v2">人间体：{{item.renjianti?item.renjianti:'无/未知'}}</view>
					</view>
				</view>
			</navigator>
		<view v-if="aoteman.length>0" class="tips">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import {getAoteman} from "@/api/api"
	export default {
		data() {
			return {
				page:1,
				aoteman:[],
				aoteman_count:0,
				tips:'数据加载中',
				keyword:'',
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				
			}
		},
		
		onLoad: function (option) {
			this.getAoteman()
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.aoteman = []
			this.getAoteman()
			uni.stopPullDownRefresh();
		},
		
		
		onReachBottom(){
		  if(this.aoteman_count>this.aoteman.length){
				this.page += 1
				this.getAoteman()
		  }else{
				this.tips = '所有数据加载完成'
		  }
		},
		
		onShareAppMessage() {
		   return {
			  path: "/pages/tujianlist/index"
			}
		},
		
		onShareTimeline(e) {
			return {
			  path: "/pages/tujianlist/index"
			}
		},
		
		methods:{
			getAoteman(){
				getAoteman(this.page).then(res=>{
					for(var i = 0; i<res.data.length;i++){
						this.aoteman.push(res.data[i])
					}
					this.aoteman_count = res.count
					if(!(res.count>res.data.length)){
						 this.tips = '所有数据加载完成'
					}
					
				})
			},
			
			
			clearKeyword(){
				this.keyword = ''
			},
			search(e){
				if(''==e){
					console.log('null')
				}else{
					uni.navigateTo({
						url: '/pages/searchContent/index?keyword='+e,
					});
				}
				
			},
			
		
		}
	}
</script>
<style>
	.u-action{color: #FFFFFF!important;}
	.u-transition{width: 100%;height: 100%;}
	page{background: #0A141E;}
</style>
<style scoped>
	.detail .v2,.detail .v1{padding: 0 10rpx;}
	.detail .v2{font-size: 3vw;margin-top: 20rpx;}
	.detail{text-align: center;font-size: 4.2vw;color: #FFFFFF;margin-top: 50rpx;}
	.icon{width: 90rpx;height: 200rpx;margin-top: 43rpx;z-index: 99;}
	.box .li_box .li{width: 329rpx;height: 500rpx;background-size: auto 100%; position: relative;flex-wrap: wrap;}
	.box .li_box{width: 50%;padding-top: 30rpx;}
	.box{width: 700rpx;flex-wrap: wrap;}
	.search{margin: 20rpx;width: 700rpx;}
	.bigbox{width: 100%;flex-wrap: wrap;}
	.tips{text-align: center;width: 700rpx;font-size: 30rpx;margin-top: 20rpx;color: #FFFFFF;}
</style>